<style lang="less" scoped>
    .main {
        position: absolute;
        top: 0.88rem;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        overflow-y: auto;
        border-top: 1px solid #ebebeb;
        .biilInfo_b{
            padding-top: 0.28rem;
            background: #fff;
            .b_t{
                display: flex;
                justify-content: center;
                align-content: center;
                margin-bottom: 0.48rem;
                font-size: 0.34rem;
                color: #323232;
                span{
                    transform: translateY(5px);
                    margin-left: 0.24rem;
                }
            }
            .b_a{
                text-align: center;
                font-size: 0.7rem;
                color: #000;
                margin: 0.48rem 0 0.4rem;
            }
            .b_s{
                font-size: 0.34rem;
                color: #a4a4a4;
                text-align: center;
                margin-bottom: 0.76rem;
            }
            .b_i{
                display: flex;
                justify-content: space-between;
                font-size: 0.3rem;
                color: #888;
                line-height: 3;
                padding: 0 0.32rem 0 0.34rem;
                span:last-child{
                    color: #313131;
                    display: inline-block;
                    max-width: 4.9rem;
                }
                .langText{
                    line-height: 2;
                }
            }
        }
    }

</style>
<template>
    <div>
        <v-header title="账单详情">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div class="main main_allScroll" :style="{top:interactive.statusBarHeight.height}">
            <div class="biilInfo_b">
                <div class="b_a">￥{{obj.billAmount}}</div>
                <div class="b_s">交易成功</div>
                <div class="b_i">
                    <span>付款方式</span>
                    <span>{{obj.payText}}</span>
                </div>
                <div class="b_i" v-if="obj.remark">
                    <span>备注</span>
                    <span class="langText">{{obj.remark}}</span>
                </div>
                <div class="b_i">
                    <span>商品说明</span>
                    <span class="langText">{{obj.describes}}</span>
                </div>
                <div class="b_i">
                    <span>账单分类</span>
                    <span>{{obj.typeText}}</span>
                </div>
                <div class="b_i">
                    <span>创建时间</span>
                    <span>{{obj.billTime}}</span>
                </div>
                <div class="b_i" v-if="obj.orderId">
                    <span>订单号</span>
                    <span>{{obj.orderId}}</span>
                </div>
                <div class="b_i">
                    <span>账单号</span>
                    <span>{{obj.billId}}</span>
                </div>
                <!--<div class="b_i">
                    <span>商户订单号</span>
                    <span>200000000000000000</span>
                </div>-->
                <!--<div class="b_i">
                    <span>收货方</span>
                    <span>{{obj.oppositeName}}</span>
                </div>
                <div class="b_i">
                    <span>收款账号</span>
                    <span>{{obj.oppositeId}}</span>
                </div>-->
            </div>
        </div>
    </div>
</template>
<script>

    import {mapActions,mapState} from 'vuex'
    import {getPayMound,getType} from './js/index'
    export default {
        data() {
            return {
                title: "登录/注册",
                loadingImg: require("../../assets/img/avatar.png"),
                errorImg: require("../../assets/img/avatar.png"),
                obj:{}

            };
        },
        activated(){
            this.obj = {}
            this.getQueryBillInfo();
        },
        methods:{
            getQueryBillInfo(){
                this.$ajax.finance.queryBillInfo({billId:this.$route.query.billId})
                    .then((res)=>{
                        this.obj = res.body.content;
                        this.obj.typeText = getType(this.obj.type)
                        this.obj.payText = getPayMound(this.obj.payMode)
                    })
            }
        },
        computed:mapState({interactive: state => state.interactive})
    }
</script>